<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'

// 假设的图片数据。在实际应用中，你会从后端 API 获取这些数据。
// 为了模拟不同高度，这里特意混合了横向和纵向的图片 URL。
const initialImages = [
  {
    id: 1,
    src:'/assets/pics/壁纸1.jpg',
    alt: '自然风景 1',
  },{
    id: 2,
    src:'/assets/pics/壁纸2.jpg',
    alt: '自然风景 1',
  },{
    id: 3,
    src:'/assets/pics/壁纸3.jpg',
    alt: '自然风景 1',
  },{
    id: 4,
    src:'/assets/pics/壁纸4.jpg',
    alt: '自然风景 1',
  },{
    id: 5,
    src:'/assets/pics/壁纸5.jpg',
    alt: '自然风景 1',
  },{
    id: 6,
    src:'/assets/pics/壁纸6.jpg',
    alt: '自然风景 1',
  },{
    id: 7,
    src:'/assets/pics/壁纸7.jpg',
    alt: '自然风景 1',
  },{
    id: 8,
    src:'/assets/pics/壁纸8.jpg',
    alt: '自然风景 1',
  },{
    id: 9,
    src:'/assets/pics/壁纸9.jpg',
    alt: '自然风景 1',
  },{
    id: 10,
    src:'/assets/pics/壁纸10.jpg',
    alt: '自然风景 1',
  },{
    id: 11,
    src:'/assets/pics/壁纸11.jpg',
    alt: '自然风景 1',
  },{
    id: 12,
    src:'/assets/pics/壁纸12.jpg',
    alt: '自然风景 1',
  },{
    id: 13,
    src:'/assets/pics/壁纸13.jpg',
    alt: '自然风景 1',
  },
]

const images = ref([]) // 响应式地存储所有图片数据
const page = ref(0) // 当前加载的页码
const pageSize = 8 // 每页加载的图片数量
const isLoading = ref(false) // 是否正在加载中
const hasMore = ref(true) // 是否还有更多数据

const loadMoreImages = async () => {
  if (isLoading.value || !hasMore.value) return

  isLoading.value = true
  // 模拟网络请求延迟
  await new Promise((resolve) => setTimeout(resolve, 500))

  const startIndex = page.value * pageSize
  const endIndex = startIndex + pageSize
  const newImages = initialImages.slice(startIndex, endIndex)

  if (newImages.length > 0) {
    images.value = [...images.value, ...newImages]
    page.value++
    // nextTick 确保 DOM 更新后，浏览器能够正确计算滚动高度
    await nextTick()
  } else {
    hasMore.value = false // 没有更多数据了
  }
  isLoading.value = false
}

// 滚动到底部加载更多
const handleScroll = () => {
  const scrollHeight = document.documentElement.scrollHeight
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  const clientHeight = document.documentElement.clientHeight

  // 判断是否滚动到底部附近 (这里设定距离底部200px时加载)
  if (scrollTop + clientHeight >= scrollHeight - 200) {
    loadMoreImages()
  }
}

// 组件挂载时，添加滚动事件监听器并加载第一页
onMounted(() => {
  loadMoreImages()
  window.addEventListener('scroll', handleScroll)
})

// 组件卸载时，移除滚动事件监听器，防止内存泄漏
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<template>
  <div class="waterfall-container">
    <div v-for="image in images" :key="image.id" class="waterfall-item">
      <img :src="image.src" :alt="image.alt" />
    </div>

    <div v-if="isLoading" class="loading-indicator">加载中...</div>
    <div v-if="!hasMore && images.length > 0" class="no-more-data">没有更多内容了</div>
  </div>
</template>

<style scoped>
/* 组件特有的样式，通过 scoped 避免全局污染 */

/* 通用样式 (可以放在全局 CSS 或这里) */
body {
  margin: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
    'Helvetica Neue', sans-serif;
  background-color: #f0f0f0; /* 页面背景色 */
  padding: 20px 0; /* 页面顶部和底部留白 */
  box-sizing: border-box;
}

/* 瀑布流容器 */
.waterfall-container {
  /* 核心 CSS 属性：将内容分成多列 */
  column-count: 3; /* 默认显示三列，你可以根据需要调整 */
  column-gap: 15px; /* 列之间的间距 */

  width: 95%; /* 容器宽度，可根据需求调整，使其两侧留有空间 */
  max-width: 1200px; /* 最大宽度，防止在宽屏幕上图片过大 */
  margin: 0 auto; /* 居中显示 */
  box-sizing: border-box; /* 边框盒模型 */
}

/* 瀑布流中的每个图片项 */
.waterfall-item {
  /* 防止图片项在列中被截断，这是实现瀑布流的关键之一 */
  break-inside: avoid-column;

  background-color: #fff; /* 背景色 */
  border-radius: 8px; /* 圆角 */
  margin-bottom: 15px; /* 图片项之间的垂直间距 */
  overflow: hidden; /* 确保图片圆角生效 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
}

.waterfall-item img {
  width: 100%; /* 图片宽度填充整个项 */
  height: auto; /* 高度自适应，保持图片比例 */
  display: block; /* 移除图片底部可能存在的额外空间 */
  /* 确保图片顶部圆角与父容器保持一致 */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* 如果你添加了 .item-info 等内容，可以取消注释并修改样式 */
/* .waterfall-item .item-info {
    padding: 10px 12px;
}
.waterfall-item .item-info .title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-top: 0;
    margin-bottom: 5px;
    line-height: 1.3;
}
.waterfall-item .item-info .description {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
    line-height: 1.5;
} */

.loading-indicator,
.no-more-data {
  text-align: center;
  padding: 20px;
  color: #888;
  font-size: 16px;
  grid-column: 1 / -1; /* 让加载提示和无更多数据提示横跨所有列 */
  margin-top: 20px;
}

/* 响应式设计 - 针对不同屏幕宽度调整列数 */

@media (max-width: 1024px) {
  .waterfall-container {
    column-count: 3; /* 中等屏幕上仍然三列 */
    column-gap: 12px;
  }
}

@media (max-width: 768px) {
  .waterfall-container {
    column-count: 2; /* 在平板和较小屏幕上显示两列 */
    column-gap: 10px;
  }

  .waterfall-item {
    margin-bottom: 12px;
  }
}

@media (max-width: 480px) {
  .waterfall-container {
    column-count: 1; /* 在手机等小屏幕上显示一列 */
    column-gap: 8px;
    width: 90%; /* 留更多边距 */
  }

  .waterfall-item {
    margin-bottom: 10px;
  }
}
</style>
